/* pages/notice-setting/notice-setting.less */

// --- 颜色变量 ---
@text-primary: #303133;
@text-regular: #606266;
@text-secondary: #909399;
@text-placeholder: #c0c4cc;
@theme-primary: #19be6b;
@theme-primary-dark: #18b566;
@danger: #f56c6c;
@warning: #f9ae3d;

// --- 字体大小变量 ---
@font-size-lg: 28rpx;
@font-size-md: 26rpx;
@font-size-sm: 24rpx;
@font-size-xs: 22rpx;

// --- 动画 ---
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// --- 页面样式 ---
page {
  background-color: #f5f7fa;
  font-size: @font-size-md;
}

.container {
  padding: 24rpx;
}

.setting-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.input-wrapper {
  position: relative;
  
  .title {
    color: @text-primary;
    font-size: @font-size-lg;
    font-weight: bold;
    margin-bottom: 24rpx;
  }

  .notice-textarea {
    width: 100%;
    height: 300rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f8f8f8;
    border: 2rpx solid #e8e8e8;
    border-radius: 12rpx;
    color: @text-regular;
    font-size: @font-size-md;
    line-height: 1.6;
    transition: all 0.3s ease;

    &:focus {
      border-color: @theme-primary;
      background-color: #ffffff;
      box-shadow: 0 0 0 4rpx fade(@theme-primary, 20%);
    }
  }

  .textarea-placeholder {
    color: @text-placeholder;
  }

  .char-counter {
    position: absolute;
    bottom: 15rpx;
    right: 20rpx;
    font-size: @font-size-sm;
    color: @text-secondary;

    &.error {
      color: @danger;
    }
  }
}

.tips-wrapper {
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;

  .tip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .tip-text {
      margin-left: 16rpx;
      color: @text-regular;
      font-size: @font-size-sm;
      line-height: 1.5;
    }
  }
}

.footer-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 40rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background-color: #f5f7fa;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
}

// 覆写van-button的禁用样式，使其更柔和
/deep/ .van-button--disabled {
  background: #c8c9cc !important;
  border-color: #c8c9cc !important;
}

